const database_server_url = "http://192.168.1.1:8080/server";

let userid = null;

function nav_link_billing_details_click_event()
{
    let self_element = document.getElementById("nav-link-billing_details");
    self_element.addEventListener("click", function(){
        //let overview_content_element = document.getElementById("billing_details_overview");
        let general_income_element = document.getElementById("general_income");
        let total_expenditure_element = document.getElementById("total_expenditure");

        // 发送请求
        const xhr = new XMLHttpRequest();
        xhr.open("POST", database_server_url);
        xhr.setRequestHeader("Content-Type", "application/json");
        
        xhr.onreadystatechange = function()
        {
            if (xhr.readyState === 4)
            {
                //console.log(1);
                if (xhr.status >= 200 && xhr.status < 300)
                {
                    // 成功收到响应报文
                    let response_body = JSON.parse(xhr.responseText);
                    if (response_body.rc === "success")
                    {
                        // 开始渲染
                        general_income_element.innerText = `${response_body.general_income}`;
                        total_expenditure_element.innerText = `${response_body.total_expenditure}`;
                    }
                    else 
                    {
                        // 查无此人, 显示"?"
                        general_income_element.innerText = "?";
                        total_expenditure_element.innerText = "?";
                    }
                }
                else
                {
                    //console.log(xhr.responseText);
                    // 没成功收到响应报文
                    console.log("fail to receive response in nav_link_billing_details_click_event()");
                }
            }
        }

        if (userid)
        {
            xhr.send(`{"opcode":8, "businessman_id":"${userid}"}`);
        }
        else 
        {
            console.log("userid error in function nav_link_billing_details_click_event()");
        }
        
    })
}

// 主函数
document.addEventListener("DOMContentLoaded", function(){
    // 获取当前页面的URL
    let url = window.location.href;
    // 使用URLSearchParams对象解析查询字符串
    let params = new URLSearchParams(url.split('?')[1]);
    // 获取userId参数的值
    userid = params.get("userid");
    //console.log(userid);

    //console.log(1);
    // 获取所有的选项卡链接
    let tabs = document.querySelectorAll('.nav-tabs .nav-link'); // 选择所有属于类名为 nav-tabs 的元素的后代中，所有类名为 nav-link 的元素
    //console.log(tabs);
    // 获取所有的选项卡内容区域
    let panes = document.querySelectorAll('.tab-content .tab-pane');

    // 移除所有 tab pane 的初始内容（如果有的话）
    for (let i = 0; i < panes.length; ++i)
    {
        let pane = panes[i];
        let pane_content = pane.querySelector('.tab-pane-content');
        if (pane_content) 
        {
            //pane_content.innerHTML = ''; // 清空内容
        }
        else 
        {
            // 如果没有 .tab-pane-content，则创建一个
            let newContent = document.createElement('div');
            newContent.classList.add("row");
            newContent.classList.add("tab-pane-content");
            pane.appendChild(newContent);
        }

    }

    // 为每一个选项卡添加一个执行效果都相同的click事件
    for (let i = 0; i < tabs.length; ++i)
    {
        let tab = tabs[i];
        tab.addEventListener("click", function(event)
        {
            //console.log(tab);

            // 阻止默认的锚点跳转行为
            event.preventDefault(); // 不要执行与该事件关联的默认行为

            // 移除所有选项卡链接和内容区域的 active 类    
            tabs.forEach(function (t) {
                t.classList.remove('active');
            });
            panes.forEach(function (p) {
                p.classList.remove('active');
            });

            // 添加 active 类到当前点击的选项卡链接
            tab.classList.add('active');

            // 获取与当前选项卡链接相关联的内容区域的 ID（从 href 属性中提取）
            let targetId = tab.getAttribute('href').substring(1); // 去掉前面的 '#'

            // 添加 active 类到对应的内容区域
            let targetPane = document.getElementById(targetId);
            targetPane.classList.add('active');

        });
    }

    // 单独为billing details选项卡, 添加其独有的click触发事件
    nav_link_billing_details_click_event();
});